<template>
  <div class="discountlist">
    <div class="discountlist-item" v-for="item in discountList" :key="item.id">
      <img :src="item.pic" alt="" />
      <div class="discountlist-item-info">
        <div class="discountlist-item-info-title">
          <img class="logo" :src="item.logpic" alt="" />
          <span>{{ item.miaoshu }}</span>
        </div>
        <div
          class="discountlist-item-info-paijian"
          v-if="item.specialText.length"
        >
          {{ item.specialText[0] }}
        </div>
        <div class="discountlist-item-info-quan">
          <span>券</span>
          {{ item.quanJine }}元
        </div>
        <div class="discountlist-item-info-bottom">
          <div class="price">
            ￥
            <span>{{ item.jiage }}</span>
            <i>聚划算价￥{{ item.yuanjia }}</i>
          </div>
          <div class="btn-buy">
            <span
              >已抢{{
                (item.xiaoliang =
                  item.xiaoliang > 10000
                    ? (item.xiaoliang / 10000).toFixed(1) + "万"
                    : item.xiaoliang)
              }}件</span
            >
            <i>马上抢</i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const state = reactive({
      tmcs: "",
      tm: "",
      tmgj: "",
    });
    const discountList = computed(() => {
      return store.state.discount.discountList.map((item: any) => {
        if (item.shopLabel === "天猫超市") {
          item.logpic = state.tmcs;
        } else if (item.shopLabel === "天猫") {
          item.logpic = state.tm;
        } else if (item.shopLabel === "天猫国际") {
          item.logpic = state.tmgj;
        }
        return item;
      });
    });

    return {
      discountList,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="stylus" scoped>
.discountlist
    .discountlist-item
        font-size .12rem
        display flex
        background-color #fff
        height 1.1rem
        border-radiu: .08rem
        margin .1rem .1rem 0
        padding .05rem
        position relative
        img
            margin-right .05rem
            width 1rem
            height 1rem
        .discountlist-item-info
            position relative
            .discountlist-item-info-title
                display flex
                align-items center
                .logo
                    height .13rem !important
                    width  .4rem !important
                span
                    overflow hidden
                    white-space nowrap
                    text-overflow ellipsis
                    width 1.9rem
            .discountlist-item-info-paijian
                height .14rem
                font-size .11rem
                font-weight 400
                color #c433da
                line-height .14rem
                margin-top .08rem
                margin-bottom .08rem

            .discountlist-item-info-quan
                margin-top .1rem
                height .12rem
                background linear-gradient(90deg,#ff8873,#ff4f4f)
                border-radius .02rem
                display inline-block
                line-height .12rem
                padding 0 .02rem 0 .01rem
                font-size .1rem
                color #fff
                display flex
                align-items: center;
                width .55rem
                span
                    display inline-block
                    font-size .09rem
                    font-weight 400
                    color #ff5351
                    line-height .095rem
                    padding 1px .02rem
                    background #fff
                    border-radius .01rem 0 0 .01rem
                    text-align center
                    margin-right .03rem
            .discountlist-item-info-bottom
                display flex
                margin-top .27rem
                align-items center
                position absolute
                width 2.4rem
                bottom .08rem
                .price
                    flex 1
                    font-size .12rem
                    height 0.12rem
                    line-height .12rem
                    color #fe3738
                    span
                        font-size .17rem
                        padding 0 .04rem 0 .015rem
                        display inline-block
                        transform translateX(-.07rem)
                    i
                        font-style normal
                        font-size .11rem
                        color #777
                        display inline-block
                        transform translateX(-.12rem) scale(.9)
                .btn-buy
                    position relative
                    span
                        height .15rem
                        font-size .1rem
                        color #fa40fd
                        line-height .15rem
                        margin-bottom .05rem
                        position absolute
                        top -.2rem
                        left -.05rem
                        transform scale(.9)
                        width .8rem
                        text-align center
                    i
                        display inline-block
                        width .68rem
                        height .2rem
                        background linear-gradient(270deg,#ff4afc,#da00ff)
                        box-shadow 0 0.01rem 0.03rem 0 rgb(255 39 252 / 43%)
                        border-radius .1rem
                        text-align center
                        font-size .11rem
                        font-weight 500
                        color #fff
                        line-height .16rem
                        font-style normal
                        line-height .2rem
</style>
